import React, { Component } from "react";
import "./login.less";
import logo from "../../assets/images/login/logo.png";
import { Button, Form, Input } from "antd";
import type { FormInstance } from "antd/es/form";
import { httpPost } from "../../api";
import { setStorage } from "../../utils";

export default class login extends Component<any> {
  constructor(props: any) {
    super(props);
  }

  loginFormRef = React.createRef<FormInstance>();

  submitForm = () => {
    const { current: loginFormRef } = this.loginFormRef;
    // console.log("获取到表单的值：--->", loginFormRef?.getFieldsValue());
    loginFormRef?.validateFields().then(async (values) => {
      httpPost("/manage/login", values).then((res) => {
        // console.log("------登录成功-------res>", res);
        setStorage("userInfo", res);
        this.props.history.replace("/home");
      });
    });
  };
  onFinish = (values: any) => {
    console.log("Success:", values);
  };

  onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  //   自定义校验规则
  validatorPwd = (_: any, value: any) => {
    const regular = /^[a-zA-Z0-9_]+$/;
    if (!value) {
      return Promise.reject("请输入密码");
    } else if (value.length < 4) {
      return Promise.reject("密码至少4位");
    } else if (value.length > 12) {
      return Promise.reject("密码最多12位");
    } else if (!regular.test(value)) {
      return Promise.reject("密码必须由英文、数字或下划线组成");
    } else {
      return Promise.resolve();
    }
  };
  render() {
    console.log(this.props);

    return (
      <div className="login">
        <header className="login-header">
          <img src={logo} alt="" />
          <p>记录游戏人生</p>
          {/* <Button type="primary">哈哈哈哈哈哈</Button> */}
        </header>
        <section className="login-content">
          <p className="login-content-title">用户登录</p>
          <Form
            ref={this.loginFormRef}
            name="basic"
            initialValues={{ remember: true }}
            onFinish={this.onFinish}
            onFinishFailed={this.onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              name="username"
              rules={[
                // 声明式验证：直接使用别人定义好的验证规则进行验证
                { required: true, message: "请输入用户名" },
                { min: 4, message: "用户名至少4位" },
                { max: 12, message: "用户名最多12位" },
                {
                  pattern: /^[a-zA-Z0-9_]+$/,
                  message: "用户名必须由英文、数字或下划线组成",
                },
              ]}
            >
              <Input placeholder="请输入用户名" />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[
                // 自定义校验规则
                { validator: this.validatorPwd },
              ]}
            >
              <Input.Password placeholder="请输入密码" />
            </Form.Item>
          </Form>
          <Button
            className="login-content-btn"
            type="primary"
            onClick={this.submitForm}
          >
            Submit
          </Button>
        </section>
      </div>
    );
  }
}
